<template>
  <a-table :pagination='pagination' rowKey="id" :columns="columns" :dataSource="list" style="margin:15px 0" @change="$emit('page',$event)">
    <template #ability="ability">
      {{ability.map(it=>it.title).join(',')}}
    </template>
    <template #action="action,row">
      <a-button style="margin-right:5px" type="primary" ghost @click="toEdit(row)">修改</a-button>
      <a-button style="margin-right:5px" type="danger" @click="toRemove(row)">删除</a-button>
    </template>
  </a-table>
</template>

<script>
export default {
  computed: {
    pagination() {
      const { page = 1, per_page = 12 } = this.payload
      return {
        current: Number(page),
        pageSize: Number(per_page),
        total: this.total
      }
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    payload: {
      type: Object,
      default: () => { }
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      columns: [
        { title: '角色名', dataIndex: 'name' },
        { title: '角色描述', dataIndex: 'title' },
        { title: '创建时间', dataIndex: 'created_at' },
        { title: '能力范围', dataIndex: 'ability', scopedSlots: { customRender: 'ability' }, width: 450 },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 350 },
      ],
    };
  },
  methods: {
    toEdit(row) {
      this.$emit('change', row)
    },
    toRemove(row) {
      this.$emit('remove', row)
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
